<template>
  <div>
    <div id="histogram"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    Histogram() {
      var histogram = echarts.init(document.getElementById("histogram"));
      var option = {
        title: {
          text: "每月收入支出",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["一月", "二月", "三月", "四月", "五月",'六月','七月','八月','九月','十月','十一月','十二月'],
        },
        series: [
          {
            name: "收入",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744,18203, 23489, 29034, 104970, 131744,23422,999291],
            itemStyle: {
                color: '#351bd6' // 第一层柱子的颜色
            }
          },
          {
            name: "支出",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 681807,19325, 23438, 31000, 121594, 681807,999929,123234],
            itemStyle: {
                color: '#8778bd' // 第二层柱子的颜色
            }
          },
        ],
      };
      histogram.setOption(option);
    },
  },
  mounted(){
    this.Histogram()
  }
};
</script>

<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
//   display: flex;
  .histogram_one {
    width: 100%;
    height: 100%;
    // background-color: aqua;
  }
}
</style>